/**
 * 专题图层 - 山洪灾害风险区划--高风险区
 */
export default {
    data() {
        return {
            trailImage: require('@/assets/map/jianban.png'),
            lineImage: require('@/assets/map/line.png'),
            ColorList: [new Cesium.Color(255,198,0,0.6), new Cesium.Color(255,90,0,0.6), new Cesium.Color(185,13,0,0.6), new Cesium.Color(255, 0, 0, 0)]
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        }
    },
    watch: {
        basin: {
            handler: function (name) {
                this.$nextTick(() => {
                    this.creatSHZHGFXQ(name)
                })
            },
            immediate: true
        }
    },
    created() {
        this._entitiesSHZHGFXQ = []
    },
    methods: {
        creatSHZHGFXQ(name) {
            this.clearSHZHGFXQ()

            if (this.layerList2[2].children.SHZHFXQH.children.SHZHGFXQ.show) {
                var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/SHZHFXQH.json`

                this.$axios.get(url).then(res => {
                    console.log(res.data)
                    var data=[]
                    if (!res.data.features) return
                    res.data.features.map((item)=>{
                        if(item.properties.LEVEL=="高风险区"){
                            data=[...data,item]
                        }
                    })
                    // var rows = res.data.features
                    var rows = data
                    rows.forEach(row => {
                        // if (feature.geometry.type === 'MultiPolygon') return
                        var multiPolygon = row.geometry.coordinates // 一行里的多个多形n)
                        if (multiPolygon.length > 1) {
                            multiPolygon.forEach(polygon => {
                                var coordinates = polygon[0] // 每个多边形的坐标
                                var lonlats = []
                                coordinates.forEach(item => {
                                    var p = Cesium.Cartographic.fromDegrees(item[0], item[1])
                                    lonlats.push(p)
                                })
                                this.drawSHZHGFXQ(lonlats, row.properties)
                                this.drawLine(lonlats)  // 绘制边界线
                            })
                        } else {
                            var lonlats = []
                            multiPolygon[0].forEach(item => {
                                var p = Cesium.Cartographic.fromDegrees(item[0], item[1])
                                lonlats.push(p)
                            })
                            this.drawSHZHGFXQ(lonlats, row.properties)
                            this.drawLine(lonlats)  // 绘制边界线
                        }
                    })
                    this.initEventSHZHGFXQ()

                })
            } else {
                this.clearSHZHGFXQ()
            }
        },
        initEventSHZHGFXQ() {
            var eventFn = pickedObject => {
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName
                ) {
                    console.log(pickedObject.id)
                    if (pickedObject.id.eventName === 'SHZHGFXQ') {
                        console.log(pickedObject.id.prop)
                        const dlgParams = this.$store.getters.dlgParams
                        dlgParams.name = '高风险区'
                        dlgParams.remarks = pickedObject.id.prop
                        this.$store.dispatch('dlgParams', dlgParams)
                        console.log(this.$store.getters.dlgParams)

                        this.$viewer.flyTo(pickedObject.id, {
                            duration: 0.5,
                            offset: {
                                heading: this.$viewer.camera.heading,
                                pitch: this.$viewer.camera.pitch,
                                range: 5000
                            }
                        })
                    }
                }
            }
            this.$store.getters.eventCesiumOption.leftPickFns.set('SHZHGFXQ', eventFn)
        },
        drawSHZHGFXQ(lonlats, properties) {
            var radians = []
            lonlats.forEach(item => {
                radians.push(item.longitude)
                radians.push(item.latitude)
            })
            // console.log(radians)
            var cars = Cesium.Cartesian3.fromRadiansArray(radians)
            var LEVEL = properties.LEVEL;
            var Color = LEVEL == '高风险区' ? this.ColorList[2] : this.ColorList[2];
            var polyEntity = {
                eventName: 'SHZHGFXQ',
                lid: 'SHZHGFXQ',
                prop: properties,
                polyline: {
                    positions: cars,
                    width: 3,
                    // material: Cesium.Color.WHITE.withAlpha(0.8),
                    material: Cesium.Color.fromCssColorString('rgba(185,13,0,1)'),
                    // material: Cesium.Color.fromBytes(185,13,0,1),
                    clampToGround: true,
                    classificationType: Cesium.ClassificationType.BOTH // BOTH  or TERRAIN
                },
                polygon: {
                    hierarchy: cars,
                    // perPositionHeight: true,
                    // material: Cesium.Color.RED.withAlpha(0.5),
                    // material: Color,
                    material: Cesium.Color.fromCssColorString('rgba(185,13,0,0.6)'),
                    // material: Cesium.Material.fromType('Stripe'),
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                }
            }
            this._entitiesSHZHGFXQ.push(this.$viewer.entities.add(polyEntity))
        },
        drawLine(lonlats) {
            var radians = []
            lonlats.forEach(item => {
                radians.push(item.longitude)
                radians.push(item.latitude)
            })
            var cars = Cesium.Cartesian3.fromRadiansArray(radians)
            var lineEntity = {
                polyline: {
                    hierarchy: cars,
                    // perPositionHeight: true,
                    material: Cesium.Color.RED.withAlpha(0.5),
                    // material: Cesium.Material.fromType('Stripe'),
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                }
            }
            this._entitiesSHZHGFXQ.push(this.$viewer.entities.add(lineEntity))
        },
        clearSHZHGFXQ() {
            if (this._entitiesSHZHGFXQ && this._entitiesSHZHGFXQ.length > 0) {
                this._entitiesSHZHGFXQ.forEach(item => {
                    this.$viewer.entities.remove(item)
                })
                this._entitiesSHZHGFXQ = []
            }
        }
    }
}
